<template>
  <Dialog
    :title="title"
    :model-value="visible"
    width="800px"
    max-height="700px"
    :before-close="closeForm"
  >
    <Form
      :schema="schema"
      :model="dic"
      @register="formRegister"
      label-width="120px"
      :isCol="false"
      :rules="rules"
    />
    <template #footer>
      <el-space>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-space>
    </template>
  </Dialog>
</template>

<script>
import * as powerApi from '@/api/role/power'
import { Dialog } from '@/components/Dialog'
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
const { formRegister, formMethods } = useForm()
import { h } from 'vue'
export default {
  components: {
    Form,
    Dialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    subSystemId: {
      type: String,
      default: null
    },
    subSystem: {
      type: String,
      default: null
    },
    parentId: {
      type: String,
      default: null
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      title: '新增菜单',
      powerId: null,
      schema: [],
      menus: [],
      rules: {
        Name: [
          {
            required: true,
            message: '菜单/目录名不能为空！',
            trigger: 'blur'
          }
        ],
        PowerType: [
          {
            required: true,
            message: '类型不能为空！',
            trigger: 'blur'
          }
        ],
        RoutePath: [
          {
            required: true,
            message: '页面路由路径不能为空！',
            trigger: 'blur'
          }
        ],
        RouteName: [
          {
            required: true,
            message: '页面路由名不能为空！',
            trigger: 'blur'
          }
        ],
        PagePath: [
          {
            required: true,
            message: '页面路径不能为空！',
            trigger: 'blur'
          }
        ]
      },
      power: {
        ParentId: null,
        Name: null,
        Description: null,
        Icon: null,
        PowerType: 1,
        RoutePath: null,
        RouteName: null,
        PagePath: null,
        IsEnable: false
      }
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.loadPower()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    formRegister,
    initScheme() {
      const list = [
        {
          field: 'base',
          label: '基础信息',
          component: 'Divider'
        },
        {
          field: 'subSystem',
          label: '所属子系统',
          formItemProps: {
            slots: {
              default: () => {
                return h('span', null, this.subSystem)
              }
            }
          }
        },
        {
          field: 'PowerType',
          label: '菜单类型',
          component: 'Select',
          componentProps: {
            placeholder: '菜单类型',
            options: [
              {
                label: '目录',
                value: 1
              },
              {
                label: '菜单',
                value: 0
              }
            ],
            on: {
              change: (val) => {
                this.power.PowerType = val
                this.initScheme()
              }
            }
          }
        },
        {
          field: 'Name',
          label: this.power.PowerType == 0 ? '菜单名' : '目录名',
          component: 'Input',
          componentProps: {
            placeholder: this.power.PowerType == 0 ? '菜单名' : '目录名'
          }
        },
        {
          field: 'ParentId',
          label: '父级目录',
          component: 'TreeSelect',
          componentProps: {
            placeholder: '父级目录',
            data: this.menus,
            nodeKey: 'Id',
            renderAfterExpand: false,
            defaultExpandAll: true,
            props: { value: 'Id', label: 'Name', children: 'Children' },
            clearable: true
          }
        },
        {
          field: 'Icon',
          label: '图标',
          component: 'IconPicker',
          componentProps: {
            placeholder: '选择图标'
          }
        },
        {
          field: 'IsEnable',
          label: '是否启用',
          component: 'Switch'
        },
        {
          field: 'Description',
          label: '备注',
          component: 'Input',
          componentProps: {
            type: 'textarea',
            maxLength: 255,
            placeholder: '备注'
          }
        }
      ]
      if (this.power.PowerType === 0) {
        list.push({
          field: 'base',
          label: '菜单配置',
          component: 'Divider'
        })
        list.push({
          field: 'RoutePath',
          label: '路由路径',
          component: 'Input',
          componentProps: {
            maxLength: 100,
            placeholder: '路由路径'
          }
        })
        list.push({
          field: 'RouteName',
          label: '路由名',
          component: 'Input',
          componentProps: {
            maxLength: 50,
            placeholder: '路由名'
          }
        })
        list.push({
          field: 'PagePath',
          label: '页面路径',
          component: 'Input',
          componentProps: {
            maxLength: 255,
            placeholder: '页面路径'
          }
        })
        list.push({
          field: 'PageParam',
          label: '参数值',
          component: 'ObjectKeySet'
        })
      }
      this.schema = list
    },
    async save() {
      const data = await formMethods.validate()
      if (data == null) {
        return
      } else if (this.id) {
        this.setPower(data)
      } else {
        this.addPower(data)
      }
    },
    formatPower(data) {
      if (data.PowerType === 1) {
        delete data.RoutePath
        delete data.RouteName
        delete data.PagePath
      }
      return data
    },
    async setPower(data) {
      await powerApi.Set(this.id, this.formatPower(data))
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    async addPower(vals) {
      const data = this.formatPower(vals)
      data.SubSystemId = this.subSystemId
      await powerApi.Add(data)
      this.$message({
        message: '添加成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    async loadPower() {
      const list = await powerApi.GetTree({
        SubSystemId: this.subSystemId,
        PowerType: 1
      })
      this.menus = list
      this.reset()
    },
    async reset() {
      if (this.id == null) {
        this.title = '新增栏目菜单'
        this.power = {}
      } else {
        const res = await powerApi.Get(this.id)
        this.title = '编辑菜单' + res.Name
        this.source = res
        this.power = Object.assign({}, res)
      }
      this.initScheme()
      this.$nextTick(() => {
        formMethods.setValues(this.power)
      })
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    resetForm() {
      if (this.id == null) {
        this.power = {
          ParentId: null,
          Name: null,
          Description: null,
          Icon: null,
          PowerType: 1,
          RoutePath: null,
          RouteName: null,
          PagePath: null,
          PageParam: null,
          IsEnable: false
        }
      } else {
        this.power = Object.assign({}, this.source)
      }
      formMethods.setValues(this.power)
    }
  }
}
</script>
